<template>
  <div>
    <p>我生成的二维码：<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="生成的二维码"></p>
  </div>
</template>

<script setup>
import {ref}  from "vue"
import QRCode from 'qrcode'; // 引入qrcode库
// 创建响应式数据qrCodeUrl
const qrCodeUrl = ref('');

// 初始化钩子  userid
const mystr = '112';

// 生成二维码
const generateQRCode = () => {
  // 调用qrcode库的toDataURL方法生成二维码图片的Base64编码  A工程  主工程
  QRCode.toDataURL(`http://192.168.1.57:8080/Test/`+mystr)
      // 成功生成二维码
      .then(url => {
        qrCodeUrl.value = url;
      })
      // 生成二维码出错
      .catch(err => {
        console.error('生成二维码出错:', err);
      });
};
// 调用生成二维码的方法
generateQRCode();
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
